<template>
    <div class="body">
      <div>
        <van-icon name="arrow-left" size="10vw" @click="checkReturn" />
      </div>
      <div class="bgimg">
        <!-- 标题 -->
        <!-- <span class="bt">用户注册</span> -->
        <!-- 用户名输入框 -->
        <br>
        <br>
        <br>
        <br>
        <form action="">
          <div class="ctt">
            <div class="box">
              <van-icon class="img" name="friends-o" size="12vw" />
              <input
                @blur="checkUname"
                v-model="uname"
                id="uname"
                type="text"
                placeholder="昵称"
              />
            </div>
            <span id="uname_message" class="message">&nbsp;</span>
          </div>
          <!-- 电话输入框输入框 -->
          <div class="ctt">
            <div class="box">
              <van-icon class="img" name="phone-o" size="12vw" />
              <input
                @blur="checkUemail"
                v-model="email"
                id="email"
                type="text"
                placeholder="电话"
              />
            </div>
            <span id="email_message" class="message"></span>
          </div>
          <!-- 密码输入框输入框 -->
          <div class="ctt">
            <div class="box">
              <van-icon name="closed-eye" class="img" size="12vw" />
              <!-- <img class="img" src="@/assets/img/2.png" alt="" /> -->
              <input
                @blur="checkUpwd"
                v-model="upwd"
                id="upwd"
                type="password"
                placeholder="密码"
                autocomplete=""
              />
            </div>
            <span id="upwd_message" class="message"></span>
          </div>
          <div class="ctt">
            <!-- 确认密码输入框输入框 -->
            <div class="box">
              <van-icon name="closed-eye" class="img" size="12vw" />
              <!-- <img class="img" src="@/assets/img/2.png" alt="" /> -->
              <input
                @blur="checkUpwd2"
                v-model="upwd2"
                id="upwd2"
                type="password"
                placeholder="确认密码"
                autocomplete=""
              />
            </div>
            <span id="upwd2_message" class="message"></span>
          </div>
        </form>
        
        <!-- 注册按钮 -->
        <div @click="checkFrom" class="btn">用户注册</div>
        <span class="login" @click="checkLogin">已有用户,立即登录</span>
      </div>
    </div>
  </template>
  
  <script>
import httpApi from '@/http';
import { Toast } from 'vant';
  export default {
    data() {
      return {
        uname: "",
        email: "",
        upwd: "",
        upwd2: "",
        form:{
          nickname: '',
          phone:'',
          upwd:'',
        }
      };
    },
    methods: {
      // 用户名验证
      checkUname() {
        let exp = /^.{2,10}$/;
        let name = this.uname.replace(/^\s+|\s+$/g, "");
        if (this.uname.trim() == "") {
          uname_message.innerHTML = "请输入2-10个字符用户名";
          uname_message.style.color = "red";
          return false;
        } else if (exp.test(name)) {
          uname_message.innerHTML = "用户名通过";
          uname_message.style.color = "green";
          return true;
        } else {
          uname_message.innerHTML = "请输入2-10个字符用户名";
          uname_message.style.color = "red";
          return false;
        }
      },
      // 手机号格式验证
      checkUemail() {
        let exp = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        if (exp.test(this.email)) {
          email_message.innerHTML = "手机号通过";
          email_message.style.color = "green";
          return true;
        } else {
          email_message.innerHTML = "请输入正确格式手机号名";
          email_message.style.color = "red";
          return false;
        }
      },
      // 密码格式验证
      checkUpwd() {
        let exp = /^[a-zA-Z]\w{5,17}$/;
        if (exp.test(this.upwd)) {
          upwd_message.innerHTML = "密码通过";
          upwd_message.style.color = "green";
          return true;
        } else {
          upwd_message.innerHTML = "请输入由6-18字母开头数字组成";
          upwd_message.style.color = "red";
          return false;
        }
      },
      // 确认密码验证
      checkUpwd2() {
        let exp = /^[a-zA-Z]\w{5,17}$/;
        if (this.upwd2.length == 0) {
          upwd2_message.innerHTML = "确认密码不能为空";
          upwd2_message.style.color = "red";
          return false;
        } else if (!exp.test(this.upwd2)) {
          upwd2_message.innerHTML = "请输入由6-18字母开头数字组成";
          upwd2_message.style.color = "red";
          return false;
        } else if (this.upwd2 == this.upwd) {
          upwd2_message.innerHTML = "确认密码通过";
          upwd2_message.style.color = "green";
          return true;
        } else {
          upwd2_message.innerHTML = "两次密码输入不一致";
          upwd2_message.style.color = "red";
          return false;
        }
      },
      // 注册按钮验证
      checkFrom() {
        if (
          this.checkUname() &&
          this.checkUemail() &&
          this.checkUpwd() &&
          this.checkUpwd2()
        ) {
          this.form.nickname = this.uname
          this.form.phone = this.email
          this.form.upwd = this.upwd
          httpApi.UserApi.registerUser(this.form).then( res =>{
             console.log('注册',res);
             if (res.data.code == 200) {
                this.$router.push("/sign");
              } else {
                // this.$messagebox("注册失败", "手机号已存在");
                Toast.fail('注册失败", "手机号已存在');
              }
          })
         
        } else {
          // this.$messagebox("注册失败", "请重新注册");
          Toast.fail('注册失败", "请重新注册');
        }
      },
      // 最下方文字跳转
      checkLogin() {
        this.$router.push("/sign");
      },
      // 返回按钮跳转
      checkReturn() {
        this.$router.push("/index");
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .body {
    width: 100vw;
    height: 100vh;
    background-image: url(@/assets/img/backgound.jpg);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
  }
  ::v-deep .mint-msgbox-confirm {
    color: black;
  }
  </style>
  <style scoped src="@/assets/css/login.css">
  </style>